<template>
	<!-- 子组件   父组件引入子组件x-banner    <x-banner> 你好</x-banner>-->
	<!-- 子组件  <slot name="header"></slot>       父组件  <span slot="header"></span>-->
	<view class="x-banner bg-ffshow ">
		<view class=" ">
			<!-- //你好 -->
			<slot name="title"></slot>
			<!-- 内容区域 -->
			<u-grid :border="false" :col="4">
				<u-grid-item v-for="(item,index) in printList" :key="index" >
					<view class="" :style="{width:`${wRpx}rpx;`,height:`${wrpx}rpx`}" @click="print(index)">
						<image class="" :src="item.url" :mode="modebool" style="width: 100%;height: 100%;"  >
						</image>
					</view> 
					<view class="grid-text color2W5">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			modebool: {
				type: String,
				default: ''
			},
			leftpx: {
				type: String
			},
			wRpx: {
				type: String,
				default: '100'
			},
			printList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
			
			}
		},methods:{
			print(index){
				this.$emit('clickPrint',index)
			}
		}
	}
</script>

<style lang="scss">
	.x-banner {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
		padding: 40rpx 0rpx 0rpx 0rpx;
		margin: 30rpx;
		overflow: hidden;
		box-sizing: border-box;


		.grid-text {
			font-size: 24rpx;
			margin-top: 24rpx;
			color: $u-type-info;
		}

	}
</style>
